<script setup>
import QRCode from 'qrcode'
import {onMounted, ref, watch} from "vue";

const qrcodeCanvas = ref(null);

const props = defineProps({
  value: {
    type: String,
    required: true,
  },
});

const generateQrCode = () => {
  const canvas = qrcodeCanvas.value;
  if (canvas) {
    QRCode.toCanvas(canvas, props.value, (error) => {
      if (error) console.error(error)
      console.log('二维码生成成功！')
    })
  }
};

onMounted(generateQrCode);

watch(() => props.value, generateQrCode);

</script>

<template>
  <div>
    <canvas ref="qrcodeCanvas"></canvas>
  </div>
</template>

<style scoped lang="scss">

</style>